const renderGl = function () {
  axios({
    url: "http://m10.ctymc.cn:24048/information?_sort=id&_order=desc",
    method: "GET",
  }).then((res) => {
    // console.log(res)
    const list = res.data
    const newlist = list.map(function (el, i) {
      return `
      <div class="msbox list-item" draggable="true">
      <div class="tx">
        <img src="./images/默认头像.jpg" alt="" />
      </div>
      <div class="msname">
        ${el.information_name} <i class="iconfont icon-bianji"></i>
      </div>
      <div class="msinfo">${el.description}</div>
      <div class="zhiding iconfont icon-zhiding2"></div>
      <div class="dele iconfont icon-shanchu1"></div>
    </div>
          `
    })
    const listg = document.querySelector(".listg")
    listg.innerHTML = newlist.join("")

    //------删除学员
    //选出所有的删除按钮，遍历数组给每个删除按钮绑定点击事件
    const dele = document.querySelectorAll(".dele")
    dele.forEach((el, i) => {
      el.addEventListener("click", function (e) {
        console.log(el, list[i])
        const ID = list[i].id
        console.log(ID)
        // 请求删除
        axios({
          url: `http://m10.ctymc.cn:24048/information/${ID}`,
          method: "DELETE",
        }).then((res) => {
          console.log("删除成功")
          renderGl() //删除完了重新渲染
        })
      })
    })
    // --以上删除
    //置顶
    // const zhiding = document.querySelectorAll(".zhiding")
    // zhiding.forEach((el, i) => {
    //   el.addEventListener("click", function () {
    //     console.log(el, list[i])
    //     list.unshift(list[i])
    //     list.splice(i + 1, 1)
    //     console.log(list)
    //     renderGl()
    //   })
    // })
    //以上置顶
  })
}
renderGl()
//------------------------------------------------------

//点击模态框出现
const modal = document.querySelector(".modal") //选出自己的模态框，想弹哪个选哪个
const modalControl = new bootstrap.Modal(modal) //把模态框new成一个对象，将拥有两种方法
const ren = document.querySelector(".ren") //按钮
ren.addEventListener("click", function () {
  modalControl.show()
})
//------------点击确认添加联系
const formgl = document.querySelector(".formgl")
const yes = document.querySelector(".yes")
yes.addEventListener("click", function (e) {
  e.preventDefault() //阻止默认行为
  const formDatagl = new FormData(formgl)
  console.log(formDatagl.get("glname"), formDatagl.get("glduihua"))
  if (formDatagl.get("glname") === null || formDatagl.get("glduihua") === "") {
    alert("请输入联系人和对话内容")
  }
  //添加进数据并渲染
  axios({
    url: "http://m10.ctymc.cn:24048/information?_sort=id&_order=desc",
    method: "POST",
    data: {
      information_name: formDatagl.get("glname"),
      description: formDatagl.get("glduihua"),
    },
  }).then((res) => {
    formgl.reset()
    console.log("添加成功")
    renderGl()
  })
})

//-------------拖拽
// 要操作的元素
const listg = document.querySelector(".listg"),
  itemg = document.querySelectorAll(".list-item")

// 判断当前拖动的是哪个元素
let source_node

// 开始拖动的事件
listg.ondragstart = (e) => {
  // 获取当前拖动的元素
  source_node = e.target
  // 记录起始位置
  record(itemg)
  // 添加moving样式
  setTimeout(() => {
    e.target.classList.add("moving")
  }, 0)
  // 设置被拖动元素允许移动到新的位置
  e.dataTransfer.effectAllowed = "move"
}

// 在元素正在拖动到放置目标时触发
listg.ondragover = (e) => {
  e.preventDefault()
}

// 拖动进行中的事件
listg.ondragenter = (e) => {
  e.preventDefault()
  // 拖回到原来的位置，就什么也不做
  if (e.target === listg || e.target === source_node) {
    return false
  }
  // 获取.list的所有子元素
  const children = Array.from(listg.children)
  // 当前劫持元素的索引值
  const sourceIndex = children.indexOf(source_node)
  // 覆盖到谁上面的索引值
  const targetIndex = children.indexOf(e.target)
  if (sourceIndex < targetIndex) {
    // insertBefore(要插入的节点，在谁前面)
    // 从下向上拖动
    listg.insertBefore(source_node, e.target.nextElementSibling)
  } else {
    // 从上向下拖动
    listg.insertBefore(source_node, e.target)
  }
  // 传入改变位置的两个元素，比较差异，执行动画
  last([e.target, source_node])
}

// 拖动结束时取消虚线
listg.ondragend = (e) => {
  e.target.classList.remove("moving")
}

// 记录起始位置
function record(eleAll) {
  for (let i = 0; i < eleAll.length; i++) {
    const { top, left } = eleAll[i].getBoundingClientRect()
    eleAll[i]._top = top
    eleAll[i]._left = left
  }
}

// 记录最后的位置，并执行动画
function last(eleAll) {
  for (let i = 0; i < eleAll.length; i++) {
    const dom = eleAll[i]
    const { top, left } = dom.getBoundingClientRect()
    if (dom._left) {
      dom.style.transform = `translate3d(${dom._left - left}px,${
        dom._top - top
      }px,0px)`
      let rafId = requestAnimationFrame(function () {
        dom.style.transition = "transform 0.3s ease-out"
        dom.style.transform = "none"
      })
      dom.addEventListener("transitionend", () => {
        dom.style.transition = "none"
        cancelAnimationFrame(rafId)
      })
    }
  }
}
